<script setup lang="ts">
import { ref } from 'vue'
import PulpingMachine2D from '@/components/device/PulpingMachine2D.vue'

let value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
</script>

<template>
  <main class="mainContainer">
    <div style="height: 100%; width: 100%; padding: 4px">
      <div style="padding: 4px; display: flex">
        <el-text type="info" class="mx-1">基地:</el-text>
        <div style="margin-left: 8px">
          <el-select v-model="value" style="width: 240px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <el-text style="margin-left: 8px" type="info" class="mx-1">区域:</el-text>
        <div style="margin-left: 8px">
          <el-select v-model="value" style="width: 240px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="margin-left: 8px">
          <el-button type="primary">查询</el-button>
        </div>
      </div>
      <div style="height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap">
        <div style="margin: 4px; width: 350px; height: auto">
          <PulpingMachine2D></PulpingMachine2D>
        </div>
        <div style="margin: 4px; width: 350px; height: auto">
          <PulpingMachine2D></PulpingMachine2D>
        </div>
        <div style="margin: 4px; width: 350px; height: auto">
          <PulpingMachine2D></PulpingMachine2D>
        </div>
        <div style="margin: 4px; width: 350px; height: auto">
          <PulpingMachine2D></PulpingMachine2D>
        </div>
        <div style="margin: 4px; width: 350px; height: auto">
          <PulpingMachine2D></PulpingMachine2D>
        </div>
        <div style="margin: 4px; width: 350px; height: auto">
          <PulpingMachine2D></PulpingMachine2D>
        </div>
        <div style="margin: 4px; width: 350px; height: auto">
          <PulpingMachine2D></PulpingMachine2D>
        </div>
        <div style="margin: 4px; width: 350px; height: auto">
          <PulpingMachine2D></PulpingMachine2D>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped>
.mainContainer {
  width: 100%;
  height: 100%;
}
</style>
